<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>分类</title>
    <link rel="stylesheet" href="../css/classify.css">
</head>

<body>
    <div class="course">
        <div class="header clearfix">
            <p class="all">全部科目</p>
            <a href="javascript:;"><img src="../img/f-搜索.jpg" alt=""></a>
        </div>
        <div class="container clearfix">
            <div class="left-title">
                <ul>
                    <li class="active"><a href="javascript:;">艺术</a></li>
                    <li><a href="javascript:;">体育</a></li>
                    <li><a href="javascript:;">语言</a></li>
                    <li><a href="javascript:;">留学</a></li>
                    <li><a href="javascript:;">小学</a></li>
                    <li><a href="javascript:;">小升初</a></li>
                    <li><a href="javascript:;">初中</a></li>
                    <li><a href="javascript:;">中考</a></li>
                    <li><a href="javascript:;">高中</a></li>
                    <li><a href="javascript:;">益智</a></li>
                    <li><a href="javascript:;">高考</a></li>
                    <li><a href="javascript:;">学前</a></li>
                    <li><a href="javascript:;">营地</a></li>
                    <li><a href="javascript:;">其它</a></li>
                </ul>
            </div>
            <div class="right-sort">
                <div class="head">
                    <a href="javascript:;" class="art-class">全部艺术课程</a>
                    <span class="pic"></span>
                </div>
                <div class="musical title">
                    <a href="javascript:;" class="kind up">乐器</a>
                    <ul class="list show">
                        <li><a href="javascript:;">全部</a></li>
                        <li><a href="javascript:;">钢琴</a></li>
                        <li><a href="javascript:;">小提琴</a></li>
                        <li><a href="javascript:;">大提琴</a></li>
                        <li><a href="javascript:;">电子琴</a></li>
                        <li><a href="javascript:;">琵琶</a></li>
                        <li><a href="javascript:;">二胡</a></li>
                        <li><a href="javascript:;">萨克斯</a></li>
                        <li><a href="javascript:;">吉他</a></li>
                        <li><a href="javascript:;">电吉他</a></li>
                        <li><a href="javascript:;">圆号</a></li>
                        <li><a href="javascript:;">葫芦丝</a></li>
                        <li><a href="javascript:;">锁呐</a></li>
                        <li><a href="javascript:;">杨琴</a></li>
                        <li><a href="javascript:;">长笛</a></li>
                        <li><a href="javascript:;">码头琴</a></li>
                        <li><a href="javascript:;">手风琴</a></li>
                        <li><a href="javascript:;">古筝</a></li>
                        <li><a href="javascript:;">巴杨琴</a></li>
                        <li><a href="javascript:;">黑管</a></li>
                        <li><a href="javascript:;">阮</a></li>
                        <li><a href="javascript:;">单簧管</a></li>
                        <li><a href="javascript:;">双簧管</a></li>
                        <li><a href="javascript:;">打击乐</a></li>
                        <li><a href="javascript:;">小号</a></li>
                        <li><a href="javascript:;">坚琴</a></li>
                        <li><a href="javascript:;">尤克里里</a></li>
                        <li><a href="javascript:;">电贝斯</a></li>
                        <li><a href="javascript:;">马林巴</a></li>
                        <li><a href="javascript:;">架子鼓</a></li>
                        <li><a href="javascript:;">竹笛</a></li>
                        <li><a href="javascript:;">竖笛</a></li>
                    </ul>
                </div>
                <div class="vocal title">
                    <a href="javascript:;" class="kind">声乐</a>
                    <ul class="list">
                        <li><a href="javascript:;">全部</a></li>
                        <li><a href="javascript:;">美声</a></li>
                        <li><a href="javascript:;">民族</a></li>
                        <li><a href="javascript:;">流行</a></li>
                        <li><a href="javascript:;">卡拉OK</a></li>
                        <li><a href="javascript:;">原生态</a></li>
                        <li><a href="javascript:;">音乐基础</a></li>
                    </ul>
                </div>
                <div class="dance title">
                    <a href="javascript:;" class="kind">舞蹈</a>
                    <ul class="list">
                        <li><a href="javascript:;">全部</a></li>
                        <li><a href="javascript:;">芭蕾舞</a></li>
                        <li><a href="javascript:;">拉丁舞</a></li>
                        <li><a href="javascript:;">街舞</a></li>
                        <li><a href="javascript:;">广场舞</a></li>
                        <li><a href="javascript:;">爵士舞</a></li>
                        <li><a href="javascript:;">古舞蹈</a></li>
                        <li><a href="javascript:;">民族舞</a></li>
                        <li><a href="javascript:;">健美操</a></li>
                        <li><a href="javascript:;">民间舞</a></li>
                        <li><a href="javascript:;">国际舞</a></li>
                        <li><a href="javascript:;">迪斯科</a></li>
                        <li><a href="javascript:;">拉拉操</a></li>
                        <li><a href="javascript:;">HipHop</a></li>
                        <li><a href="javascript:;">摩登舞</a></li>
                    </ul>
                </div>
                <div class="drawing title">
                    <a href="javascript:;" class="kind">绘画</a>
                    <ul class="list">
                        <li><a href="javascript:;">全部</a></li>
                        <li><a href="javascript:;">素描</a></li>
                        <li><a href="javascript:;">水粉</a></li>
                        <li><a href="javascript:;">水彩</a></li>
                        <li><a href="javascript:;">国画</a></li>
                        <li><a href="javascript:;">油画</a></li>
                        <li><a href="javascript:;">沙画</a></li>
                        <li><a href="javascript:;">插画</a></li>
                        <li><a href="javascript:;">速写</a></li>
                        <li><a href="javascript:;">创意画</a></li>
                        <li><a href="javascript:;">简笔画</a></li>
                        <li><a href="javascript:;">幼儿绘画</a></li>
                        <li><a href="javascript:;">卡通画</a></li>
                        <li><a href="javascript:;">漫画</a></li>
                        <li><a href="javascript:;">线描</a></li>
                    </ul>
                </div>
                <div class="calligraphy title">
                    <a href="javascript:;" class="kind">书法</a>
                    <ul class="list">
                        <li><a href="javascript:;">全部</a></li>
                        <li><a href="javascript:;">硬笔书法</a></li>
                        <li><a href="javascript:;">软笔书法</a></li>
                    </ul>
                </div>
                <div class="media-art title">
                    <a href="javascript:;" class="kind">媒体艺术</a>
                    <ul class="list">
                        <li><a href="javascript:;">全部</a></li>
                        <li><a href="javascript:;">播音主持</a></li>
                        <li><a href="javascript:;">影视表演</a></li>
                        <li><a href="javascript:;">摄影培训</a></li>
                        <li><a href="javascript:;">编导培训</a></li>
                        <li><a href="javascript:;">电视报装</a></li>
                        <li><a href="javascript:;">DJ培训</a></li>
                        <li><a href="javascript:;">模特培训</a></li>
                        <li><a href="javascript:;">舞台表演</a></li>
                    </ul>
                </div>
                <div class="sculpture title">
                    <a href="javascript:;" class="kind">雕塑</a>
                    <ul class="list">
                        <li><a href="javascript:;">全部</a></li>
                        <li><a href="javascript:;">陶艺</a></li>
                    </ul>
                </div>
                <div class="design title">
                    <a href="javascript:;" class="kind">设计</a>
                    <ul class="list">
                        <li><a href="javascript:;">全部</a></li>
                        <li><a href="javascript:;">3D游戏设计</a></li>
                        <li><a href="javascript:;">插画</a></li>
                        <li><a href="javascript:;">泥塑</a></li>
                        <li><a href="javascript:;">装置</a></li>
                        <li><a href="javascript:;">装饰</a></li>
                        <li><a href="javascript:;">手工</a></li>
                        <li><a href="javascript:;">拼贴</a></li>
                        <li><a href="javascript:;">石膏</a></li>
                    </ul>
                </div>
                <div class="the-dra title">
                    <a href="javascript:;" class="kind">戏剧</a>
                    <ul class="list">
                        <li><a href="javascript:;">全部</a></li>
                        <li><a href="javascript:;">戏剧教育</a></li>
                        <li><a href="javascript:;">戏剧表演</a></li>
                        <li><a href="javascript:;">京剧</a></li>
                    </ul>
                </div>
                <div class="foot">
                    <ul>
                        <li><a href="javascript:;" class="home"><img src="../img/首页-2.jpg" alt=""></a>
                            <span>首页</span></li>
                        <li><a href="javascript:;" class="class"><img src="../img/分类.jpg" alt=""></a>
                            <span>分类</span></li>
                        <li><a href="javascript:;" class="shop"><img src="../img/购物车.jpg" alt=""></a>
                            <span>购物车</span></li>
                        <li><a href="javascript:;" class="my"><img src="../img/我的-2.jpg" alt=""></a>
                            <span>我的</span></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <script src="../js/jQuery.js"></script>
    <script>
        $(function(){
            $(".left-title ul li").on('click',function(){
                $(this).hasClass('active')?
                '':$('.left-title ul li').removeClass('active'),$(this).addClass('active');
            })

            $('.right-sort .title .kind').click(function(){
                $(this).next().hasClass('show')?'':
                $('.right-sort .title ul').removeClass('show'),
                $(this).next().addClass('show'),
                $('.right-sort .kind').removeClass('up'),
                $(this).addClass('up');
            })

            $('.foot li a').on('click',function(){
                $(this).hasClass('class')?
                '':$(this).hasClass('home')?
                location.href = '../index.html':$(this).hasClass('my')?
                location.href = './My.html':location.href = './login.html';
            })
        })
    </script>
</body>

</html>